<template>
  <view class="my-page-wrap">
    <view class="user-info">
      <view class="left">
        <view class="avatar">
          <image :src="userInfo.avatar"></image>
        </view>
        <view class="user-name-wrap">
          <view class="user-name">
            <text class="user-name-val">{{
              userInfo.nickname || "未登录"
            }}</text>
            <image
              v-if="userInfo.auth_type === 1"
              src="/static/image/authenticated-icon.png"
              class="authenticated"
            ></image>
          </view>
          <view class="user-phone">{{ userInfo.mobile }}</view>
        </view>
      </view>

      <view class="right" @click="handleToEditName">
        <image src="/static/image/user-update.png"></image>
      </view>
    </view>

    <view class="features-wrap">
      <view class="features-content">
        <view class="features-head order-head">
          <view class="line"></view>
          <view class="text">我的订单</view>

          <view class="look-all" @click="handleToOrderList(0)">
            <view class="text">查看全部订单</view>
            <uni-icons type="right" size="18" color="#BFBFC1"></uni-icons>
          </view>
        </view>

        <view class="features-all order-wrap">
          <view
            class="features-box mb-64"
            data-features="2"
            @click="handleToOrderList(0)"
          >
            <view class="icon">
              <image
                src="/static/image/my-icon-1.png"
                class="icon-image"
              ></image>
            </view>
            <view class="text">待接单</view>
          </view>

          <view
            class="features-box mb-64"
            data-features="5"
            @click="handleToOrderList(1)"
          >
            <view class="icon">
              <image
                src="/static/image/my-icon-2.png"
                class="icon-image"
              ></image>
            </view>
            <view class="text">已接单</view>
          </view>

          <view
            class="features-box mb-64"
            data-features="3"
            @click="handleToOrderList(2)"
          >
            <view class="icon">
              <image
                src="/static/image/my-icon-3.png"
                class="icon-image"
              ></image>
            </view>
            <view class="text">配送中</view>
          </view>

          <view
            class="features-box mb-64"
            data-features="4"
            @click="handleToOrderList(3)"
          >
            <view class="icon">
              <image
                src="/static/image/my-icon-4.png"
                class="icon-image"
              ></image>
              <view class="text">已完成</view>
            </view>
          </view>
        </view>
      </view>

      <view class="features-wrap">
        <view class="features-content">
          <view class="features-head">
            <view class="line"></view>
            <view class="text">我的功能</view>
          </view>

          <view class="features-all">
            <view
              class="features-box mb-64"
              data-features="3"
              @click="handleToRealName"
            >
              <view class="icon">
                <image
                  src="/static/image/my-icon-5.png"
                  class="icon-image"
                ></image>
              </view>
              <view class="text">实名认证</view>
            </view>
            <view
              class="features-box mb-64"
              data-features="4"
              @click="handleBindToAddressManagement"
            >
              <view class="icon">
                <image
                  src="/static/image/my-icon-6.png"
                  class="icon-image"
                ></image>
              </view>
              <view class="text">地址管理</view>
            </view>
            <view
              class="features-box mb-64"
              data-features="6"
              @click="handleToOrderList(0)"
            >
              <view class="icon">
                <image
                  src="/static/image/my-icon-7.png"
                  class="icon-image"
                ></image>
              </view>
              <view class="text">订单列表</view>
            </view>
            <view
              class="features-box mb-64"
              data-features="9"
              @click="handleToRiderEntrance"
            >
              <view class="icon">
                <image
                  src="/static/image/my-icon-8.png"
                  class="icon-image"
                ></image>
              </view>
              <view class="text">{{
                parseInt(userInfo.express_type) === 1
                  ? "进入骑手端"
                  : "成为骑手"
              }}</view>
            </view>
          </view>
        </view>
      </view>

      <van-toast id="van-toast" />
    </view>
  </view>
</template>

<script>
import Toast from "wxcomponents/vant/toast/toast";

const app = getApp();

export default {
  data() {
    return {
      userInfo: {
        id: "",
        avatar: "",
        nickname: "",
        mobile: "",
        auth_type: "",
        express_type: "",
      },
    };
  },
  methods: {
    getUserInfo(res) {
      wx.getUserProfile({
        desc: "授权登录",
        success(res) {
          console.log(res);
        },
        fail(res) {
          console.log(res);
        },
      });
    },
    getPhoneNumber(data) {
      console.log(data);
    },
    handleToEditName() {
      uni.navigateTo({
        url: "/pages/myFeature/userInfo/index",
      });
    },
    handleBindToAddressManagement() {
      uni.navigateTo({
        url: "/pages/myFeature/addressManagement/index",
      });
    },
    handleToOrderList(activeTab) {
      uni.navigateTo({
        url: "/pages/myFeature/orderList/index?activeTab=" + activeTab,
      });
    },
    handleToRealName() {
      uni.navigateTo({
        url: "/pages/myFeature/realNameAuth/index",
      });
    },
    handleToRiderEntrance() {
      const { express_type, auth_type } = this.userInfo;

      if (parseInt(auth_type) !== 1) {
        Toast("请先完成实名认证");
        return;
      }

      if (parseInt(express_type) === 1) {
        uni.navigateTo({
          url: "/pages/kdOrder/home",
        });
        app.globalData.curTabIndex = 0;
      } else {
        uni.navigateTo({
          url: "/pages/rider/entrance",
        });
      }
    },
    handleGetUserInfo() {
      app.request({}, "/api/logistics/user/user_info").then((res) => {
        console.log(res);
        const { code, data, msg } = res;

        if (code === 1) {
          const { id, avatar, nickname, mobile, auth_type, express_type } =
            data;

          app.globalData.userInfo.id = id;
          app.globalData.userInfo.avatar = app.globalData.ftp + avatar;
          app.globalData.userInfo.nickname = nickname;
          app.globalData.userInfo.mobile = mobile;
          app.globalData.userInfo.auth_type = auth_type;
          app.globalData.userInfo.express_type = express_type;
          this.userInfo = {
            id,
            avatar: app.globalData.ftp + avatar,
            nickname,
            mobile,
            auth_type,
            express_type,
          };
        } else {
          Toast(msg);
        }
      });
    },
  },
  onShow() {
    this.handleGetUserInfo();
  },
  onLoad() {},
};
</script>

<style lang="less">
.my-page-wrap {
  min-height: 100vh;
  background-color: #f9f9f9;
}

.user-info {
  width: 100%;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;

    .avatar {
      image {
        width: 126rpx;
        height: 126rpx;
        border-radius: 50%;
        margin-left: 56rpx;
        margin-right: 36rpx;
      }
    }

    .user-name-wrap {
      .user-name {
        display: flex;
        align-items: center;
        color: rgba(51, 51, 51, 100);
        font-size: 36rpx;
        font-family: PingFangSC-Medium;
        margin-bottom: 10rpx;

        image {
          width: 152rpx;
          height: 42rpx;
          margin-left: 24rpx;
        }

        .user-name-val {
          display: block;
          max-width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .authenticated {
          width: 112rpx;
          height: 40rpx;
        }
      }

      .user-phone {
        color: rgba(51, 51, 51, 100);
        font-size: 26rpx;
        font-family: PingFangSC-Regular;
      }
    }
  }

  .right {
    image {
      width: 44rpx;
      height: 44rpx;
      margin-right: 64rpx;
    }
  }
}

.integral-wrap {
  width: 100%;
  height: 180rpx;
  padding: 0 20rpx;
  box-sizing: border-box;

  .integral-wrap-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 6px;

    .left {
      display: flex;
      width: 50%;
      padding-left: 66rpx;
      box-sizing: border-box;

      image {
        width: 46rpx;
        height: 46rpx;
        margin-right: 44rpx;
      }

      .text {
        color: rgba(0, 0, 0, 1);
        font-size: 30rpx;
        font-family: PingFangSC-Regular;
      }

      .val {
        color: rgba(251, 86, 10, 100);
        font-size: 32rpx;
        font-family: PingFangSC-Medium;
        margin-left: 16rpx;
      }
    }

    .mid {
      width: 1px;
      height: 52rpx;
      background-color: rgba(238, 238, 238, 1);
    }

    .right {
      display: flex;
      width: 50%;
      padding-left: 66rpx;
      box-sizing: border-box;

      image {
        width: 46rpx;
        height: 46rpx;
        margin-right: 44rpx;
      }

      .text {
        color: rgba(0, 0, 0, 1);
        font-size: 30rpx;
        font-family: PingFangSC-Regular;
      }

      .val {
        color: rgba(251, 86, 10, 100);
        font-size: 32rpx;
        font-family: PingFangSC-Medium;
        margin-left: 16rpx;
      }
    }
  }
}

.features-wrap {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-top: 18rpx;

  .features-content {
    width: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding-top: 48rpx;

    .features-head {
      display: flex;
      align-items: center;
      padding-left: 22rpx;
      box-sizing: border-box;
      margin-bottom: 64rpx;

      .line {
        width: 4rpx;
        height: 26rpx;
        border-radius: 14px;
        background-color: rgba(0, 143, 253, 1);
      }

      .text {
        color: rgba(51, 51, 51, 100);
        font-size: 32rpx;
        text-align: center;
        font-family: PingFangSC-Medium;
        margin-left: 16rpx;

        .features-tip {
          color: rgba(153, 153, 153, 100);
          font-size: 24rpx;
          font-family: PingFangSC-Regular;
        }
      }

      .more-task {
        margin-left: 200rpx;
        color: rgba(153, 153, 153, 100);
        font-size: 26rpx;
        text-align: right;
        font-family: PingFangSC-Regular;
      }
    }

    .order-head {
      position: relative;

      .look-all {
        position: absolute;
        right: 24rpx;
        display: flex;
        align-items: center;

        .text {
          color: #bfbfc1;
          font-size: 26rpx;
        }
      }
    }

    .border-bottom {
      margin-bottom: 40rpx;
    }

    .features-all {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 64rpx;

      .features-box {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .icon {
          image {
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 24rpx;
          }

          .icon-image {
            width: 70rpx;
            height: 70rpx;
          }
        }

        .text {
          color: rgba(51, 51, 51, 100);
          font-size: 28rpx;
          text-align: center;
          font-family: PingFangSC-Regular;
        }
      }

      .mb-96 {
        margin-bottom: 96rpx;
      }

      .mb-64 {
        margin-bottom: 64rpx;
      }
    }

    .order-wrap {
      padding-bottom: 0;

      .features-box {
        margin-bottom: 52rpx;
      }
    }

    .pb-50 {
      padding-bottom: 50rpx;
    }
  }
}

.align-center {
  display: flex;
  align-items: center;
}
</style>
